<h3>Numeric Fields</h3>
<p>
    Numeric inputs will only allow user to type numbers, completely ignoring all other characters. Full keyboard support is implemented.
    Try using up/down arrow keys, ctr + up/down (cmd + up/down on mac) to increase numbers. When the number is changed it will be validated
    and formatted (if needed).
</p>
<div style="height: 20px"></div>

<h5>Preview</h5>
<style>
    .w2ui-field input {
        width: 140px;
        font-size: 12px;
        text-align: right;
    }
</style>
<div style="height: 20px"></div>
<div class="w2ui-reset">
    <div class="w2ui-field w2ui-span3">
        <label>Integer:</label>
        <div><input id="w2int"></div>
    </div>
    <div style="clear: both"></div>
    <div class="w2ui-field w2ui-span3">
        <label>Float:</label>
        <div><input id="w2float"></div>
    </div>
    <div style="clear: both"></div>
    <div class="w2ui-field w2ui-span3">
        <label>Money:</label>
        <div><input id="w2money"></div>
    </div>
    <div style="clear: both"></div>
    <div class="w2ui-field w2ui-span3">
        <label>Hex:</label>
        <div><input id="w2hex"></div>
    </div>
    <div style="clear: both"></div>
    <div class="w2ui-field w2ui-span3">
        <label>Color:</label>
        <div><input id="w2color" style="text-align: left"></div>
    </div>
    <div style="clear: both"></div>
</div>
<script>
$(function () {
    $('#w2int').w2field('int');
    $('#w2float').w2field('float');
    $('#w2money').w2field('money');
    $('#w2hex').w2field('hex');
    $('#w2color').w2field('color');
});
</script>
<div style="height: 20px"></div>

<h5>Code</h5>
<textarea class="html">
<div class="w2ui-field">
    <label>Integer:</label>
    <div><input id="w2int"></div>
</div>
<div class="w2ui-field">
    <label>Float:</label>
    <div><input id="w2float"></div>
</div>
<div class="w2ui-field">
    <label>Money:</label>
    <div><input id="w2money"></div>
</div>
<div class="w2ui-field">
    <label>Hex:</label>
    <div><input id="w2hex"></div>
</div>
<div class="w2ui-field">
    <label>Color:</label>
    <div><input id="w2color" style="text-align: left"></div>
</div>

&lt;script>
$(function () {
    $('#w2int').w2field('int');
    $('#w2float').w2field('float');
    $('#w2money').w2field('money');
    $('#w2hex').w2field('hex');
    $('#w2color').w2field('color');
});
&lt;/script>
</textarea>

<h3>Options</h3>
You can provide various options for numeric fields as second argument. The structure of the options object is below:

<textarea class="javascript">
options = {
    min                : null,      // min value
    max                : null,      // max value
    step               : 1,         // step when used with keyboard
    autoFormat         : true,      // if true, formats the numbers, percents, money fields
    autoCorrect        : true,      // if true, enforces min/max for numbers, dates or show an error
    currency: {
        prefix: w2utils.settings.currencyPrefix,
        suffix: w2utils.settings.currencySuffix,
        precision: w2utils.settings.currencyPrecision
    },
    decimalSymbol      : w2utils.settings.decimalSymbol, // symbol for fractions
    groupSymbol        : w2utils.settings.groupSymbol,   // symbol for number grouping
    arrow              : false,     // if true, will show down error line in a drop down field
    keyboard           : true,      // if true, user can use keyboard arrow to change the number
    precision          : null,      // defines precision for auto format
    prefix             : '',        // input prefix
    suffix             : ''         // input suffix
}
</textarea>